<template>
  <div class="commonBoxmp" >
      <el-scrollbar class="HeightAuto">
    <div
     class="white-bg p20 animate__animated animate__fadeInUp animation-delay0">
      <h2>关于</h2>
      <p class="readme-content">
        <el-link type="primary" :underline="false">{{ $store.state.projectName }}</el-link>
        是基于vite + ts + vue3.0 + script setup语法糖 +
        element-plus的后台解决方案，
        基于MIT开源协议。原则上不会限制任何代码用于商用。
      </p>
    </div>

    <div>
      <el-card class="box-card animate__animated animate__fadeInUp animation-delay100">
        <template #header>
          <div class="card-header">
            <h4>项目信息</h4>
          </div>
        </template>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template #label> 版本 </template>

            <el-tag >1.0.0</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label> gitee </template>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              href="https://gitee.com/blueskyliu/admin-tempalte"
            >
              https://gitee.com/blueskyliu/admin-tempalte</el-link
            >
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 生产依赖 start -->
      <el-card class="box-card animate__animated animate__fadeInUp animation-delay200">
        <template #header>
          <div class="card-header">
            <h4>生产依赖</h4>
          </div>
        </template>
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item
          v-for="(item,index) in state.dependencies"
          :key="index"
          >
         <template #label> {{index}} </template>
              {{item}}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 开发依赖 start -->
      <el-card class="box-card animate__animated animate__fadeInUp animation-delay300">
        <template #header>
          <div class="card-header">
            <h4>开发依赖</h4>
          </div>
        </template>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item
          v-for="(item,index) in state.devDependencies" :key="index"
          >
            <template #label> {{index}} </template>
              {{item}}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
      </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
interface State {
  dependencies:object;
  devDependencies: object;
}
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
// import packageJson from '/@ts/views/sys/readme/data';
import * as packageJson from "../../../package.json";
const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const router = useRouter();
const route = useRoute();
const count = ref(0);

const state: State = reactive({
  dependencies: {}, //生产依赖
  devDependencies: [], //开发依赖
});
//初始化生产 开发信息
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  return o[name];
}
  state.devDependencies= packageJson.devDependencies;
  state.dependencies= packageJson.dependencies;
onMounted(() => {});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
</script>

<style  scoped lang="scss">
.readme-content {
  margin-top: 10px;
  line-height: 2.5rem;
}
.box-card {
  margin: 15px;
  margin-bottom: 0;
}
</style>
